<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";

const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();
const editorRef3 = shallowRef();
const editorRef4 = shallowRef();

const valueHtml = ref(
  "<p>主要明确临战准备、行动实施、结束恢复等阶段人民防空行动的内容、方法，以及复杂情况设想和应对处置要点等内容。</p>"
);
const valueHtml1 = ref(
  "<p>行动内容：①XX；②XX；③XX；④XX。<br/>主要方法：<br/>1.平战转换行动方法XX。<br/>2.人员防护行动方法XX。<br/>3.重要目标防护行动方法XX。<br/>4.跨区支援行动计划方法XX。</p>"
);

const valueHtml2 = ref(
  "<p>行动内容：①XX；②XX；③XX；④XX。<br/>主要方法：<br/>1.人员防护行动方法XX。<br/>2.重要目标防护行动方法XX。<br/>3.跨区支援行动计划方法XX。</p>"
);

const valueHtml3 = ref(
  "<p>行动内容：①XX；②XX；③XX；④XX。<br/>主要方法：<br/>1.消除空袭后果XX。<br/>2.人员返城XX。<br/>3.恢复生产生活XX。</p>"
);

const valueHtml4 = ref(
  "<p>①情况设想：设想1：东南沿海出现战争征候；美军在南海方向与我军事冲突升级失控；设想2：中印边境对抗升级，形成局部冲突，有冲突失控的征候；根据国家发布局部战争动员令，某某市人民防空系统依令转入战时体制。<br/>处置要点：接到上级预先号令和加强临战准备指示后，下达XX命令。XX；XX；XX；XX；XX；XX。<br/>②情况设想：设想1：美为牵制我国经济发展，在东南亚与我边境地区接壤的国家之间进行挑拨，以南海问题和支持反政府武装为借口，多次在我西南地区上空实施临空侦察，EP—3侦察机和EA—6B电子战飞机活动频繁，对我指挥通信系统、雷达设备等实施测向定位和电子干扰，美对我实施空袭的征候明显。设想2：中印边境局势失控，印军空地军事力量向边境地区转移，印军B707电子侦察机、Glob。<br/>处置要点：依令下达XX命令。XX；XX；XX；XX；XX；XX。<br/>③情况设想：设想1：美为牵制我国经济发展，在东南亚与我边境地区接壤的国家之间进行挑拨，以南海问题和支持反政府武装为借口，对我国边境设施、重要目标实施空袭。设想2：中印边境态势升级，有飞机突入我境实施突袭。<br/>处置要点：依令下达XX命令。XX；XX；XX；XX；XX；XX。</p>"
);

const toolbarConfig = {};
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const toolbarConfig3 = {};
const toolbarConfig4 = {};
const editorConfig = {
  placeholder: "请输入内容...",
};

const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");
const mode3 = ref("default");
const mode4 = ref("default");

// 加载html
const initHtml = () => {
  searchDataJbfa({ m: "行动要点-引言" }).then((res) => {
    if (res.code !== 200) return ElMessage.error(res.msg);
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "行动要点引言")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "临战阶段")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "行动实施阶段")?.v || "";
    valueHtml3.value = data.find((x) => x.k === "结束恢复阶段")?.v || "";
    valueHtml4.value =
      data.find((x) => x.k === "复杂情况设想和应对处置要点")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};
const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};
const handleCreated3 = (editor) => {
  editorRef3.value = editor; // 记录 editor 实例，重要！
};
const handleCreated4 = (editor) => {
  editorRef4.value = editor; // 记录 editor 实例，重要！
};

// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa({
      m: "行动要点-引言",
      data: [
        {
          k: "行动要点引言",
          v: valueHtml.value,
        },
        {
          k: "临战阶段",
          v: valueHtml1.value,
        },
        {
          k: "行动实施阶段",
          v: valueHtml2.value,
        },
        {
          k: "结束恢复阶段",
          v: valueHtml2.value,
        },
        {
          k: "复杂情况设想和应对处置要点",
          v: valueHtml2.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});

onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  const editor3 = editorRef3.value;
  const editor4 = editorRef4.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  if (!editor3) return;
  if (!editor4) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
  editor3.destroy();
  editor4.destroy();
});
</script>
<template>
  <div>
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="临战阶段" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="行动实施阶段" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>

    <FirstTitle name="结束恢复阶段" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef3"
        :defaultConfig="toolbarConfig3"
        :mode="mode3"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml3"
        :defaultConfig="editorConfig"
        :mode="mode3"
        @onCreated="handleCreated3"
      />
    </div>

    <FirstTitle name="复杂情况设想和应对处置要点" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef4"
        :defaultConfig="toolbarConfig4"
        :mode="mode4"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml4"
        :defaultConfig="editorConfig"
        :mode="mode4"
        @onCreated="handleCreated4"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss">
.zddj {
  font-size: 14px;
}
</style>